import LazyImage from "@/components/base/LazyImage"
import { SvgComponent } from "@/components/base/Svg"
import ButtonRegular from "@/components/composite/ButtonRegular/main"
import styled from "@emotion/styled"
import { memo, ReactNode, useEffect, useState } from "react"
import { getAssetsUrlWithHttp } from "@/features/business/HomePage_deprecated/constant"
import { TypeMemberIndexNavListItem } from "@/apis/home_page_constant_types"

interface ModalProps {
    title: ReactNode
    options: TypeMemberIndexNavListItem[]
    selected: string[]
    onSelect: (sel: string[]) => void
    onClose?: () => void
}

const Content = styled.div`
    background: #fff;
    font-family: Gilroy;
    padding: 0 16rem;
    font-family: Gilroy;
    border-top-left-radius: 10rem;
    border-top-right-radius: 10rem;
    overflow: hidden;
`

const ModalHeader = styled.div`
    height: 60rem;
    line-height: 60rem;
    position: relative;
`

const Title = styled.div`
    font-weight: 700;
    font-size: 18rem;
    text-align: center;
`

const CloseBtn = styled.div`
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24rem;
    height: 24rem;
    display: flex;
    justify-content: center;
    align-items: center;
`

const SelectedTitle = styled.div`
    font-family: Gilroy;
    display: flex;
    align-items: center;
    padding-top: 16rem;
    padding-bottom: 12rem;
`

const SelectedText = styled.div`
    font-weight: 500;
    font-size: 14rem;
    height: 20rem;
    line-height: 20rem;
    letter-spacing: 0%;
    color: #69728c;
`

const SelectedBadge = styled.div`
    height: 16rem;
    line-height: 16rem;
    border-radius: 8rem;
    min-width: 24rem;
    text-align: center;
    color: #69728c;
    background-color: #f5f5f5;
    padding-left: 5rem;
    padding-right: 5rem;
    margin-left: 4rem;
`
const BrandsContainer = styled.div`
    overflow-y: scroll;
`
const ProviderContent = styled.div`
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9.5rem 10rem;
    overflow-y: scroll;
`

const ProviderItem = styled.div<{ active: boolean }>`
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1rem solid ${({ active }) => (active ? "#FF1F57" : "#f5f5f5")};
    height: 44rem;
    line-height: 44rem;
    border-radius: 6rem;
`

const ProviderPost = styled.img`
    width: 96rem;
    height: 32rem;
    object-fit: contain;
`

const ActionButtonContainer = styled.div`
    padding-top: 32rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 40rem;
    button:hover {
        box-shadow: none;
    }
`
const ConfirmButton = styled(ButtonRegular)`
    font-family: "Gilroy", sans-serif;
    height: 40rem;
    width: 166rem;
    font-weight: 500;
    text-align: center;
    outline: none;
    border: none;
    box-shadow: none;
    font-weight: 500;
    font-size: 16rem;
    &[data-variant-type="outline"] {
        -webkit-text-fill-color: #ff3568;
    }
`
const IconCloseSvg = styled(SvgComponent("pages/HomePage/icon_close.svg"))``

export const ModalGameProvider = memo(
    ({ selected, onSelect, onClose, options = [], title = "" }: ModalProps) => {
        const [_selected, _setSelected] = useState<string[]>(selected)

        useEffect(() => {
            _setSelected(selected)
        }, [selected])

        return (
            <Content>
                <ModalHeader>
                    <Title>{title}</Title>
                    <CloseBtn onClick={onClose}>
                        <IconCloseSvg />
                    </CloseBtn>
                </ModalHeader>
                <SelectedTitle>
                    <SelectedText>Selected:</SelectedText>
                    <SelectedBadge>{_selected.length}</SelectedBadge>
                </SelectedTitle>
                <BrandsContainer>
                    <ProviderContent>
                        {options.map((option, idx) => {
                            return (
                                <ProviderItem
                                    active={_selected.includes(`${option.venue_id}_${option.id}`)}
                                    key={`${option.venue_id}_${option.id}_${idx}_provider`}
                                    onClick={() => {
                                        if (_selected.includes(`${option.venue_id}_${option.id}`)) {
                                            _setSelected((prev) =>
                                                prev.filter(
                                                    (it) =>
                                                        it !== `${option.venue_id}_${option.id}`,
                                                ),
                                            )
                                        } else {
                                            _setSelected((prev) =>
                                                prev.concat([`${option.venue_id}_${option.id}`]),
                                            )
                                        }
                                    }}
                                >
                                    <LazyImage
                                        src={getAssetsUrlWithHttp(option.logo)}
                                        alt=""
                                        objectFit={"contain"}
                                        width={"96"}
                                        height={"32"}
                                    />
                                </ProviderItem>
                            )
                        })}
                    </ProviderContent>
                </BrandsContainer>
                <ActionButtonContainer>
                    <ConfirmButton
                        variant={{
                            type: "outline",
                        }}
                        onClick={() => {
                            _setSelected([])
                        }}
                    >
                        Reset
                    </ConfirmButton>
                    <ConfirmButton
                        onClick={() => {
                            onSelect(_selected)
                            onClose?.()
                        }}
                    >
                        Confirm
                    </ConfirmButton>
                </ActionButtonContainer>
            </Content>
        )
    },
)
